<template>
	<view>
		<view class="bannerBox" style="">
			<image src="http://jzkj02.oss-cn-hangzhou.aliyuncs.com/file/nEY1600676566264.jpg" mode="aspectFill" style="width: 100%;height: 280upx;"></image>
		</view>
		<view>
			<view class="inp-line">
				<view class="title">姓名</view>
				<input class="inp" type="text" v-model="userName" />
			</view>
			<view class="inp-line">
				<view class="title">联系方式</view>
				<input class="inp" type="text" v-model="mobile" />
			</view>
			<view class="inp-line">
				<view class="title">咨询项目</view>
				<view class="inp">
					<radio-group @change="radioChange">
						<label class="radio">
							<radio :value="1" /><text>烧结多孔砖</text>
						</label>
						<label class="radio">
							<radio :value="2" /><text>烧结普通砖</text>
						</label>
						<label class="radio">
							<radio :value="3" /><text>空心砖</text>
						</label>
						<label class="radio">
							<radio :value="4" /><text>红机瓦</text>
						</label>
						<label class="radio">
							<radio :value="5" /><text>其他</text>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="inp-line">
				<view class="title">留言</view>
				<textarea class="inp" v-model="content"/>
			</view>
			<view style="margin: 30upx;">
				<button type="primary" style="background-color: #007aff;" @tap="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				remark: '',
				userName: '',
				mobile: '',
				content: '',
				type: '',
				rules: {
					userName: {
						rule: /\S/,
						msg: '请输入姓名！'
					},
					mobile: {
						rule: /^[0-9]{11}$/,
						msg: '请输入正确的手机号！'
					},
					type: {
						rule: /\S/,
						msg: '请选择要咨询的项目！'
					},
					content: {
						rule: /\S/,
						msg: '请输入留言！'
					}
				}
			}
		},
		methods: {
			submit(){
				if(!this.config.globalData.user.user_nick){
					this.config.getLoginInfo();
					return;
				}
				let self = this;
				if(!self.validate('userName')) return;
				if(!self.validate('mobile')) return;
				if(!self.validate('type')) return;
				if(!self.validate('content')) return;
				uni.showLoading({title: '加载中',mask: true});
				this.config.post('/api/leavingmessage/add', {
					'lm.type': self.type,
					'lm.user_name': self.userName,
					'lm.mobile': self.mobile,
					'lm.content': self.content,
				}).then(res=>{
					uni.hideLoading();
					if(res.data.code==='0'){
						uni.showToast({title: (res.data.message),icon: 'none'});
						self.type = '';
						self.userName = '';
						self.mobile = '';
						self.content = '';
					}else{
						uni.showToast({title: self.config.handleError(res.data),icon: 'none'});
					}
				})
			},
			validate(key){
				let bool=true;
				if(!this.rules[key].rule.test(this[key])){
					uni.showToast({title:this.rules[key].msg,icon: 'none'});
					bool=false;
					return false;
				}
				return bool;
			},
			radioChange(evt){
				this.type = evt.detail.value;
			}
		}
	}
</script>

<style lang="less" scoped>
	.inp-line{
		display: flex;
		padding: 20upx 30upx;
		border-bottom: 1px solid #ccc;
		.title{
			width: 30%;
		}
		.inp{
			width: 70%;
		}
	}
	.line{
		display: flex;
		padding: 20upx 30upx;
	}
	.radio{
		display: inline-block;
		width: 50%;
		margin: 10upx 0;
	}
	button::after{
		border: none;
		border-radius:0;
	}
</style>
